<template>
	<view class="content">
		
		<view>
			<view class="swiperContainer">
				<view class="uni-padding-wrap">
					<view class="page-section swiper">
						<view class="page-section-spacing">
							<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
								<swiper-item>
									<view class="swiper-item">
										<image src="../../static/indexBg1.jpg" mode=""></image>
									</view>
								</swiper-item>
								<swiper-item>
									<view class="swiper-item">
										<image src="../../static/indexBg2.jpg" mode=""></image>
									</view>
								</swiper-item>
								<swiper-item>
									<view class="swiper-item uni-bg-blue">
										<image src="../../static/indexBg3.jpg" mode=""></image>
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
			<view class="submitBox">
			    <view class="box" @click="openinfo('../submit/submit')">
			    	<i class="iconfont">&#xe662;</i>
					提交需求
			    </view>
				<view class="box" @click="openinfo('../myList/myList')">
					<i class="iconfont">&#xe60e;</i>
					我的行程方案
				</view>
			</view>
			</view>
			<view class="dest flex">
				<view class="nation">
					目的地
				</view>
				<view class="more">
					更多
				</view>
			</view>
			<view class="countryBox ">
				<view class="areaTag"  @click="openinfo('../destList/destList')">
					东南亚
				</view>
				<view class="areaTag">
					东南亚
				</view>
				<view class="areaTag">
					东南亚
				</view>
				<view class="areaTag">
					日本韩国
				</view>
				<view class="areaTag">
					澳新
				</view>
				<view class="areaTag">
					东南亚
				</view>
				<view class="areaTag">
					日本韩国
				</view>
				<view class="areaTag">
					澳新
				</view>
			</view>
			<view class="swiper2">
			
		  <scroll-view class="swiper2Box" scroll-x="true"  scroll-left="120">
					<view class="sence"  @click="openinfo('../destList/destList')">
					<image src="../../static/indexBg1.jpg" mode=""></image>
					<view class="posi">
					泰国
					</view>
				</view>
				<view class="sence">
					<image src="../../static/indexBg2.jpg" mode=""></image>
				<view class="posi">
					新加坡
				</view>
				</view>
				<view class="sence">
					<image src="../../static/indexBg3.jpg" mode=""></image>
				<view class="posi">
					印度尼西亚
				</view>
				</view>
				<view class="sence">
					<image src="../../static/indexBg1.jpg" mode=""></image>
				<view class="posi">
					香港
				</view>
				</view>
				<view class="sence">
					<image src="../../static/indexBg2.jpg" mode=""></image>
				<view class="posi">
					巴黎
				</view>
				</view>
				<view class="sence">
					<image src="../../static/indexBg3.jpg" mode=""></image>
				<view class="posi">
					澳大利亚
				</view>
				</view>
				  </scroll-view>
			</view>
			<view class="dest flex">
				<view class="nation">
					深度策划
				</view>
				<view class="more"  @click="openinfo('../homePlanningList/homePlanningList')">
					更多
				</view>
			</view>
			
			<view class="swiper3">
				<scroll-view class="swiper2Box" scroll-x="true"  scroll-left="120">
                <view class="swiper3Box" @click="openinfo('../planDetails/planDetails')">
						<image src="../../static/indexBg1.jpg" mode=""></image>
					<view class="adress">
						<i class="iconfont">&#xe734;</i>
						南极
					</view>
                   <view class="name">奢想迪拜</view>
				   <view class="intro">住奢华酒店,享云端美食</view>
				</view>
				<view class="swiper3Box">
					<image src="../../static/indexBg1.jpg" mode=""></image>
				   <view class="adress">
				   	<i class="iconfont">&#xe734;</i>
				   	南极
				   </view>
				   <view class="name">奢想迪拜</view>
				   <view class="intro">住奢华酒店,享云端美食</view>
				</view>
				<view class="swiper3Box">
					<image src="../../static/indexBg1.jpg" mode=""></image>
				  <view class="adress">
				  	<i class="iconfont">&#xe734;</i>
				  	迪拜
				  </view>
				   <view class="name">奢想迪拜</view>
				   <view class="intro">住奢华酒店,享云端美食</view>
				</view>
				 </scroll-view>
			</view>
			
			<view class="dest flex">
				<view class="nation">
					旅行灵感
				</view>
			</view>
			<view class="idea" @click="openinfo('../planDetails/planDetails')">
				<image src="../../static/indexBg1.jpg" mode=""></image>
			<view class="mask">
				<view class="txt">婚拍</view>
				<view class="line"></view>
				<view class="intr">
					明星同款婚纱照&海岛婚礼&蜜月
				</view>
			</view>
			</view>
			<view class="idea">
				<image src="../../static/indexBg2.jpg" mode=""></image>
			<view class="mask">
				<view class="txt">欧洲</view>
				<view class="line"></view>
				<view class="intr">
					喜欢中国人的免签国,神秘的巴尔干半岛
				</view>
			</view>
			</view>
			<view class="idea">
				<image src="../../static/indexBg3.jpg" mode=""></image>
			<view class="mask">
				<view class="txt">暑期必玩</view>
				<view class="line"></view>
				<view class="intr">
					最高省8000元/人,聪明的爸妈已经预定
				</view>
			</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '首页',
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		onLoad() {

		},
		methods: {
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			  scroll: function(e) {
            console.log(e)
            this.old.scrollTop = e.detail.scrollTop
        },
		//跳转页面
		 openinfo(url) {
		      
		      //var newsid = e.currentTarget.dataset.newsid ;    
		      uni.navigateTo({
		          url: url,
		          success: res => {},
		          fail: () => {},
		          complete: () => {}
		      });
		  }
		}
	}
</script>

<style scoped="">
	.content {
		text-align: center;
		height: 400upx;
	}

	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 200upx;
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
	}

	.swiperContainer {
		width: 100%;
		height: 600upx;
		position: relative;
	}
    .submitBox{
		width: 100%;
		bottom: 50rpx;
		position: absolute;
		left: 0;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.submitBox .box{
		width: 45%;
		height: 70rpx;
		line-height: 70rpx;
		background: #53DA8B;
		border-radius: 10rpx;
		color: #fff;
		font-size: 30rpx;
	}
	.submitBox .box .iconfont{
		margin-right: 8rpx;
	}
	.swiperContainer .uni-padding-wrap {
		height: 600upx;
	}

	uni-swiper {
		height: 600upx !important;
	}

	.swiperContainer image {
		width: 100%;
		height: 600upx;
	}
	.dest{
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		height: 100rpx;
		line-height: 40rpx;
		}
   .flex{
	   display: flex;
	   justify-content: space-between;
   }
   .dest .nation{
	  font-size: 40rpx;
	  font-weight: bold;
   }
   .dest .more{
	   font-size: 24rpx;
   }
   .countryBox{
	  width: 100%;
	  padding: 30rpx;
	  padding-top: 0;
	  box-sizing: border-box;
	  display: flex;
	  justify-content: space-around;
	  flex-wrap: wrap;
   }
  .countryBox .areaTag{
	  width: 23%;
	  padding: 16rpx 22rpx;
	  font-size: 28rpx;
	  background: #fafafa;
	  border: 2rpx solid #ececec;
	  border-radius: 10rpx;
	  box-sizing: border-box;
	  margin-top: 30rpx;
  }
  .swiper2{
      width: 100%;
	  overflow: auto;
  }
  .swiper2 .sence{
	  width: 220rpx;
	  height: 220rpx;
	  border-radius: 20rpx;
	   display: inline-block;
	   margin-left: 16rpx;
	   position: relative;
  }
  .swiper2 .sence image{
	  width: 100%;
	  height: 100%;
	   border-radius: 10rpx;
  }
  .swiper2Box{
	    white-space: nowrap;
        width: 100%;
  }
  .posi{
	  width: 100%;
	  height: 50rpx;
	  position: absolute;
	  font-size: 32rpx;
	  font-weight: bold;
	  color: #fff;
	  bottom: 0;
	  left: 0;
	  text-align: left;
	  padding-left: 20rpx;
	  box-sizing: border-box;
	  background-image: url(../../static/senceBg.jpg);
  }
  .swiper3Box{
	  width: 300rpx;
	  height: 400rpx;
	  display: inline-block;
	  margin-left: 20rpx;
	  text-align: left;
	  position: relative;
  }
 
  .swiper3Box .adress{
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  color: #fff;
	  font-size: 28rpx;
	  padding-left: 10rpx;
	  box-sizing: border-box;
	  padding-bottom: 10rpx;
	} 
  .swiper3Box .adress .iconfont{
	  margin-right: 8rpx;
  }
  .swiper3Box image{
	  border-radius: 16rpx;
	  width: 100%;
	  height: 100%;
  }
  .swiper3Box .name{
	  font-size: 34rpx;
	  font-weight: bold;
	  width: 100%;
	  padding:0 20rpx;
	  box-sizing: border-box;
  }
  .swiper3Box .intro{
	   width: 100%;
	  font-size: 30rpx;
	  color: #6d6d6d;
	  margin-top: 10rpx;
	    padding: 0 20rpx;
	  box-sizing: border-box;
	   white-space: wrap;
  }
  .idea{
	  width: 100%;
	  padding: 0 20rpx;
	  padding-top: 0;
	  box-sizing: border-box;
	  position: relative;
  }
  .idea image{
	  width: 100%;
	  height: 400rpx;
	  border-radius: 10rpx;
  }
  .mask{
	  position: absolute;
	  margin: 0 20rpx;
	  height: 400rpx;
	  background: rgba(0,0,0,.3);
	  top: 0;
	  right: 0;
	  left: 0;
  }
  .idea .txt{
	  font-size: 50rpx;
	  color: #fff;
	  margin: 0 auto;
	  margin-top: 100rpx;
	  letter-spacing: 8rpx;
	  }
	  .idea .line{
		  width: 240rpx;
		  height: 4rpx;
		  background: #fff;
		  margin: 0 auto;
		  margin-top: 10rpx;
	  }
	   .idea .intr{
		   color: #fff;
		   margin: 0 auto;
		   margin-top: 10rpx;
		   letter-spacing:3rpx;
		   font-size: 34rpx;
	   }
</style>
